<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/includes.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>二维码在线生成</title>
<link href="<c:url value='/css/app/baidu/baidu.css'/>" rel="stylesheet" type="text/css" />
<link href="<c:url value='/css/app/baidu/qrCode/main.css'/>" rel="stylesheet" type="text/css" />
<script src="<c:url value='/js/jquery-1.4.2.min.js'/>" type="text/javascript"></script>
<script src="<c:url value='/js/jquery.form.js'/>" type="text/javascript"></script>
<script src="<c:url value='/js/checkForm.js'/>" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(":radio").click(function(){
		swtichDiv();
	});
	
	function swtichDiv(){
		var type = $(":radio[name='type'][checked]").val();
		switch(type){
		case "sms":
			$("#vcarddiv").hide();
			$("#smsdiv").show();
			$("#emaildiv").hide();
			$("#bookmarkdiv").hide();
			$("#dtxtdiv").hide();
			break;
		case "email":
			$("#vcarddiv").hide();
			$("#smsdiv").hide();
			$("#emaildiv").show();
			$("#bookmarkdiv").hide();
			$("#dtxtdiv").hide();
			break;
		case "bookmark":
			$("#vcarddiv").hide();
			$("#smsdiv").hide();
			$("#emaildiv").hide();
			$("#bookmarkdiv").show();
			$("#dtxtdiv").hide();
			break;
		case "dtxt":
			$("#vcarddiv").hide();
			$("#smsdiv").hide();
			$("#emaildiv").hide();
			$("#bookmarkdiv").hide();
			$("#dtxtdiv").show();
			break;
		default:
			$("#vcarddiv").show();
			$("#smsdiv").hide();
			$("#emaildiv").hide();
			$("#bookmarkdiv").hide();
			$("#dtxtdiv").hide();
		}
		AutoResize();
	}
	
	var insureLis = $(".insure-inner li"); 
	insureLis.click(function () { 
		insureLis.attr('class', ''); 
		switch (insureLis.index($(this))) { 
		case 0: 
			$(this).attr('class', "select-left"); break; 
		case 4: 
			$(this).attr('class', "select-right"); break; 
		default: 
			$(this).attr('class', "select"); break; 
		}
		AutoResize();
	}); 
	
	$("#makebutton").click(function(){
		if(!checkInput()){return false;}
		$("#form1").ajaxSubmit({
			url:"<c:url value='/app/baidu/makeQrCode.nhtml'/>",
			dataType:"json",
			success:function(data){
				$("#line1").show();
				$("#downloadpic").show();
				$("#pic").html("<img src='<c:url value='/customFiles/qrcodemake/"+data.img+"'/>'/>");
				AutoResize();
			},
			error:function(){
				$("#tips1").empty();
				$("#tips1").append("<em id='errorIcon1'></em>");
				$("#tips1").append("生成图片错误");
			}
		});
	});
	
	$("#resetbutton").click(function(){
		$("#form1").resetForm();
	});
});

/*输入验证*/
function checkInput(){
	var str = '';
	var type = $(":radio[name='type'][checked]").val();
	switch(type){
	case "sms":
		if(str == ''){
			str += checkMobile('smsSm',false);
		}
		if(str == ''){
			str += inputChk('smsTxt','内容',70);
		}
		break;
	case "email":
		if(str == ''){
			str += checkEmail('mailTo',false);
		}
		if(str == ''){
			str += inputChkAllowEmpty('mailSub','标题',70);
		}
		if(str == ''){
			str += inputChkAllowEmpty('mailTxt','内容',1000);
		}
		break;
	case "bookmark":
		if(str == ''){
			str += inputChk('bmSub','主题',70);
		}
		if(str == ''){
			str += inputChkAllowEmpty('bmUrl','网址',80);
		}
		break;
	case "dtxt":
		if(str == ''){
			str += inputChk('dtxtSub','主题',200);
		}
		if(str == ''){
			str += inputChkAllowEmpty('dtxtTxt','网址',1000);
		}
		break;
	default:
		str += inputChk('vcardName','姓名',20);
		if(str == ''){
			str += checkTel('vcardTel',true);
		}
		if(str == ''){
			str += checkMobile('vcardMobile',true);
		}
		if(str == ''){
			str += inputChkAllowEmpty('vcardDep','部门',10);
		}
		if(str == ''){
			str += inputChkAllowEmpty('vcardJob','职务',10);
		}
		if(str == ''){
			str += inputChkAllowEmpty('vcardCompany','公司',10);
		}
		if(str == ''){
			str += inputChkAllowEmpty('vcardAddr','地址',30);
		}
		if(str == ''){
			str += checkPost('vcardPost',true);
		}
		if(str == ''){
			str += inputChkAllowEmpty('vcardWeb','网址',80);
		}
		if(str == ''){
			str += checkEmail('vcardEmail',true);
		}
	}
	if(str == '')
	{
		$("#tips1").empty();
		return true;
	}else{
		$("#tips1").empty();
		$("#tips1").append("<em id='errorIcon1'></em>");
		$("#tips1").append(str);
		return false;
	}
}

/*百度应用自适应高度*/
function AutoResize() {
    try {
        var h = document.body.clientHeight;
        if (h > 0) {
            bdjs.clearAutoHeight();
            bdjs.setHeight(h);
        }
    } catch (e) { }
}
</script>
</head>
<body>
	<div class="wrapper">
		<div class="content clearfix">
			<div class="app-detail-title clearfix"></div>
			<div class="app-content clearfix">
				<form:form modelAttribute="qrCodeForm" id="form1">
				    <div style="position:absolute; left:0px; top:10px; z-index:-1;">
			            <input checked="checked" id="r1" name="type" value="vcard" type="radio"/>
			            <input id="r2" name="type" value="sms" type="radio"/>
			            <input id="r3" name="type" value="email" type="radio"/>
			            <input id="r4" name="type" value="bookmark" type="radio"/>
			            <input id="r5" name="type" value="dtxt" type="radio"/>
			         </div>
					<div class="insure-nav">
						<div class="insure-inner">
							<ul>
								<li class="select-left"><label for="r1" hidefocus="true">电子名片</label></li>
								<li class=""><label for="r2" hidefocus="true">短信</label></li>
								<li class=""><label for="r3" hidefocus="true">电子邮件</label></li>
								<li class=""><label for="r4" hidefocus="true">网络书签</label></li>
								<li class=""><label for="r5" hidefocus="true">文本信息</label></li>
							</ul>
						</div>
					</div>
					<div class="input-list" id="vcarddiv">
						<div class="input-div">
							<label> 姓名： </label> <input id="vcardName" name="vcardName"
								size="10" class="input w-150" tabindex="3" type="text"/><font color="red">*</font>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 电话： </label> <input id="vcardTel" name="vcardTel" size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
						<div class="input-div">
							<label> 手机： </label> <input id="vcardMobile" name="vcardMobile"
								size="10" class="input w-150" tabindex="3" type="text"/>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 部门： </label> <input id="vcardDep" name="vcardDep"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
						<div class="input-div">
							<label> 职务： </label> <input id="vcardJob" name="vcardJob" size="10"
								class="input w-150" tabindex="3" type="text"/>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 公司： </label> <input id="vcardCompany" name="vcardCompany"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
						<div class="input-div">
							<label> 地址： </label> <input id="vcardAddr" name="vcardAddr"
								size="10" class="input w-150" tabindex="3" type="text"/>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 邮编： </label> <input id="vcardPost" name="vcardPost"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
						<div class="input-div">
							<label> 网址： </label> <input id="vcardWeb" name="vcardWeb" size="10"
								class="input w-150" tabindex="3" type="text"/>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 邮件： </label> <input id="vcardEmail" name="vcardEmail"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
					</div>
					<div class="input-list"  id="smsdiv" style="display:none">
						<div class="input-div">
							<label> 手机： </label> <input id="smsSm" name="smsSm"
								size="10" class="input w-150" tabindex="3" type="text"/>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 内容： </label> <input id="smsTxt" name="smsTxt"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
					</div>
					<div class="input-list" id="emaildiv" style="display:none">
						<div class="input-div">
							<label> 发送： </label> <input id="mailTo" name="mailTo"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
						<div class="input-div">
							<label> 标题： </label> <input id="mailSub" name="mailSub"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
						<div class="input-div">
							<label> 内容： </label> <input id="mailTxt" name="mailTxt"
								size="10" class="input w-250" tabindex="3" type="text"/>
						</div>
					</div>
					<div class="input-list" id="bookmarkdiv" style="display:none">
						<div class="input-div">
							<label> 主题： </label> <input id="bmSub" name="bmSub"
								size="10" class="input w-150" tabindex="3" type="text"/>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 地址： </label> <input id="bmUrl" name="bmUrl"
								size="10" class="input w-150" tabindex="3" type="text"/>
						</div>
					</div>
					<div class="input-list" id="dtxtdiv" style="display:none">
						<div class="input-div">
							<label> 主题： </label> <input id="dtxtSub" name="dtxtSub"
								size="10" class="input w-150" tabindex="1" type="text"/>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label> 内容： </label> <input id="dtxtTxt" name="dtxtTxt"
								size="10" class="input w-150" tabindex="2" type="text"/>
						</div>
					</div>
					<div class="gjj-btn">
						<span id="makebutton"><span class="green-btn">立即生成</span> </span> 
						<span onclick="javascript:resetForm();" id="resetbutton"><span class="gray-btn">重 置</span> </span> 
						<span class="tip" id="tips1"></span>
					</div>
		        	<div class="input-list">
		        		<div id="line1" class="line" style="display:none;"></div>
		        		<div id="pic"></div>
		        		<div id="downloadpic" style="display:none;"><img src="<c:url value='/images/app/baidu/qrCode/sample.png'/>"/></div>
		        	</div>
				</form:form>
				<div class="kd-bottom">&copy 若水网络工作室</div>
			</div>
		</div>
	</div>
	<script src="http://app.baidu.com/static/appstore/scripts/bdjs_client-1.0.js"></script>
	<script src="http://app.baidu.com/static/appstore/monitor.st"></script>
</body>
</html>